<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
		
        <div class="container mt-1">
          <el-form inline size="small">
			<div class="flex items-center search_form">
				<div>
					奖品名称：
					<el-input
					v-model="searchForm.name"
					placeholder="请输入奖品名称"
					style="width: 200px; margin-right: 10px;"
					size="small"
					></el-input>
				</div>
				<!-- <div>
					添加时间
					<el-date-picker
					v-model="time"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					style=" margin-right: 10px;"
					size="small"
					></el-date-picker>
				</div> -->
				
				 <div style="margin-left: 10px;">
					<el-button type="primary" size="mini" @click="mySearch">搜索</el-button>
					<el-button size="mini" @click="reset">重置</el-button>
					<el-button type="primary" size="mini" @click="addBtn">添加</el-button>
				 </div>
			</div>
			
           
			
           
          </el-form>
        </div>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
        size="mini"
        height="600px"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          prop="id"
          label="ID"
          min-width="50"
        />
        <el-table-column label="奖品名称"
	  					align="center"
                         prop="name"
						 width="200"
                         :show-overflow-tooltip="true">
		
        </el-table-column>
		<el-table-column  label="奖品图片"   align="center">
			      <template slot-scope="scope">
			         <div>
						<el-image style="width: 100px; height: 50px" 
						:preview-src-list="[$baseUrl+'/storage/'+scope.row.image]"
						:src="$baseUrl+'/storage/'+scope.row.image"></el-image>
			 		</div>
			      </template>
			  </el-table-column>
		<el-table-column label="类型"
		                 prop="type"
						 align="center"
						 width="150"
		                 :show-overflow-tooltip="true">
			  <template slot-scope="scope">
				{{ ['','加购换本品','赠送本品+积分','加购换门票+积分','赠送实物+积分','赠送实物','概率','内定'][scope.row.type] }}
			</template>
		</el-table-column>
		<!-- num  give_hzs_points  give_points pay_price probability -->
<!-- 		
		<el-table-column label="六瓶中几瓶"
		                 prop="num"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->
		<el-table-column label="赠送合作商积分"
		                 prop="give_hzs_points"
						 align="center"
		                 min-width="120"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.give_hzs_points || '--' }}
				</template>
		</el-table-column>
		<el-table-column label="赠送用户积分"
		                 prop="give_points"
						 align="center"
		                 min-width="120"
		                 :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.give_points || '--' }}
				</template>	
		</el-table-column>
		<el-table-column label="换购需要支付金额"
		                 prop="pay_price"
						 align="center"
		                 min-width="150"
		                 :show-overflow-tooltip="true">
		</el-table-column>
		<!-- <el-table-column label="中奖概率"
		                 prop="probability"
						 align="center"
		                 min-width="100"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->


		<el-table-column label="添加时间"
		                 prop="add_time"
						width="200"
						 align="center">
		</el-table-column>
		<el-table-column label="修改时间"
		                 prop="update_time"
						 width="200"
						 align="center">	
		</el-table-column>
		<!-- <el-table-column label="备注"
		                 prop="desc"
						 align="center"
		                 :show-overflow-tooltip="true">
		</el-table-column> -->
		
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
			<el-button type="text" @click="editRow(scope.row)">编辑</el-button>
			<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
	  <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
	  :title="title"
	  :visible.sync="formShow"
	  :close-on-click-modal="false"
	  width="1100px">
	  <el-form ref="form" :model="form" label-width="180px" >
		 <div style="height: 600px;overflow-y: scroll;">
				<el-form-item label="奖品名称" prop="age">
			<el-input v-model="form.name" placeholder="请输入奖品名称" size="small"></el-input>
		  </el-form-item>
		  <!-- <el-form-item label="中奖数量(六瓶中几瓶)" prop="num">
			<el-input v-model="form.num" placeholder="请输入中奖数量(六瓶中几瓶)" size="small"></el-input>
		  </el-form-item> -->
		  <el-form-item label="奖品图片">
		    <uploadImg ref="uploadImg" @getImgUrl="getImgUrl" />
		  </el-form-item>
		  <el-form-item label="类型" prop="type">
				<el-select v-model="form.type" @change="changeType" placeholder="请选择类型" size="small">
					<el-option label="加购换本品" value="1"></el-option>
					<el-option label="赠送本品+积分" value="2"></el-option>
					<el-option label="加购换门票+积分" value="3"></el-option>
					<el-option label="赠送实物+积分" value="4"></el-option>
					<el-option label="赠送实物" value="5"></el-option>
					<el-option label="概率" value="6"></el-option>
					<el-option label="内定" value="7"></el-option>
				</el-select>
		  </el-form-item>
		  <div v-if="form.type == 1">
				<el-form-item label="加购金额" prop="hzs_need_points">
					<el-input v-model="form.pay_price" placeholder="请输入加购金额" size="small"></el-input>
				</el-form-item>
				<el-form-item label="用户得奖赠送合作商积分" prop="give_hzs_points">
					<el-input v-model="form.give_hzs_points" placeholder="请输入用户得奖赠送合作商积分" size="small"></el-input>
				</el-form-item>
		  </div>
		  <div v-if="form.type == 2">
				<el-form-item label="赠送用户积分" prop="hzs_need_points">
					<el-input v-model="form.give_points" placeholder="请输入赠送用户积分" size="small"></el-input>
				</el-form-item>
		  </div>
		  <div v-if="form.type == 3">
				<el-form-item label="加购金额" prop="hzs_need_points">
					<el-input v-model="form.pay_price" placeholder="请输入加购金额" size="small"></el-input>
				</el-form-item>
			    <el-form-item label="赠送用户积分" prop="hzs_need_points">
					<el-input v-model="form.give_points" placeholder="请输入赠送用户积分" size="small"></el-input>
				</el-form-item>
				<el-form-item label="客服电话" prop="hzs_need_points">
					<el-input v-model="form.serve_phone" placeholder="请输入赠送用户积分" size="small"></el-input>
				</el-form-item>
		  </div>
		  <div v-if="form.type == 4">
			    <el-form-item label="赠送用户积分" prop="hzs_need_points">
					<el-input v-model="form.give_points" placeholder="请输入赠送用户积分" size="small"></el-input>
				</el-form-item>
		  </div>
		  <div v-if="form.type == 6">
				<!-- <el-form-item label="中奖概率" prop="probability">
					<el-input v-model="form.probability" type="number" placeholder="请输入中奖概率" size="small"></el-input>
				</el-form-item> -->
				<el-form-item label="类型" prop="probability">
					<el-radio-group v-model="form.tt">
					  <el-radio label="1">积分</el-radio>
					  <el-radio label="2">加购</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="赠送用户积分" v-if="form.tt == 1" prop="hzs_need_points">
					<el-input v-model="form.give_points" placeholder="请输入赠送用户积分" size="small"></el-input>
				</el-form-item>
				<el-form-item label="加购金额" v-if="form.tt == 2" prop="hzs_need_points">
					<el-input v-model="form.pay_price" placeholder="请输入加购金额" size="small"></el-input>
				</el-form-item>
		  </div>

		  <!-- <el-form-item label="换购需要支付金额" prop="pay_price">
			<el-input v-model="form.pay_price" placeholder="请输入换购需要支付金额" size="small"></el-input>
		  </el-form-item>
		  <el-form-item label="赠送用户积分" prop="hzs_need_points">
			<el-input v-model="form.give_points" placeholder="请输入赠送用户积分" size="small"></el-input>
		  </el-form-item>
		  <el-form-item label="用户得奖赠送合作商积分" prop="give_hzs_points">
			<el-input v-model="form.give_hzs_points" placeholder="请输入用户得奖赠送合作商积分" size="small"></el-input>
		  </el-form-item>
		  <el-form-item label="中奖概率" prop="probability">
			<el-input v-model="form.probability" type="number" placeholder="请输入中奖概率" size="small"></el-input>
		  </el-form-item> -->
		  <el-form-item label="中奖说明" prop="desc">
			<el-input v-model="form.desc" placeholder="请输入中奖说明" size="small"></el-input>
			<!-- <div style="z-index: 1000000;position: relative;">
                <edit  ref="myEdit1" />
             </div> -->
		  </el-form-item>
		 </div>
		  
		  
	  </el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button size="mini" @click="formShow = false">取 消</el-button>
	    <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
	  </span>
	</el-dialog>
  </div>
</template>
<script>
  import  uploadImg  from "@/components/uplodeImg.vue"
  import  edit  from "@/components/wangEditor.vue"
  export default {
	  components:{
		  uploadImg,
		  edit
	  },
    data() {
      return {
        title:'新增',
		form:{
			id:null,
			name:"",
            probability:"", //概率
            desc:'', //备注
			image:'',
			pay_price:'', //换购需要支付金额
			give_hzs_points:'', //用户得奖赠送合作商积分
			tt:'1', //类型
			type:'', //换购类型
			num:"1",
			give_points:'', //赠送用户积分
			serve_phone:'',
		},
		list:[],
		page:1,
		pageSize:10,
		searchForm:{
			name:"",
		},
		time:[],
      }
    },
    mounted() {
		this.lodeList()
    },
    methods: {
		changeType(){
			this.form.probability = ''
			this.form.pay_price = ''
			this.form.give_hzs_points = ''
			this.form.give_points = ''
		},
		getImgUrl(url){
			this.form.image = url
		},
		addBtn(){
			this.form = {
				id:null,
				name:"",
				probability:"", //概率
				desc:'', //备注
				image:'',
				pay_price:'', //换购需要支付金额
				give_hzs_points:'', //用户得奖赠送合作商积分
				tt:'1', //类型
				type:'', //换购类型
				num:"1",
				give_points:'', //赠送用户积分
			}
			setTimeout(()=>{
				this.$refs.myEdit1.html = ''
			},100)
			this.title = '新增'
			this.formShow = true
		},

		reset(){
			this.searchForm = {
				name:"",
			}
			this.time = []
			this.mySearch()
		},
		
		editRow(row,type){
			
			this.type = type
			this.title = '编辑'
			for(let i in this.form){
				this.form[i] = row[i]
			}
			setTimeout(()=>{
			    this.$refs.uploadImg.url = row.image
				this.$refs.myEdit1.html = row.desc
			},100)
			this.formShow = true
		
		},
		
		confirm(){
			// this.form.desc = this.$refs.myEdit1.html
		    this.$api.post('/admin/addEditPrize',this.form).then(res=>{
		    	  if(res.code==200){
					  this.formShow = false
		    	  		this.lodeList()
						this.$message({
								type: 'success',
								message: res.msg
							})
		    	  }else{
						this.$message({
								type: 'error',
								message: res.msg
							})
				  }
		    })
		},
		delRow(id){
			this.$confirm('确定删除', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						let params = {
							dd:{id}
						}
					  this.$api.post('/admin/delPrize',params).then(res=>{
					  	  if(res.code==200){
					  	  	this.lodeList()
					  	  }
					  })
			  })
	   },
      lodeList(){
		  let params = {
		          	page:this.page,
		          	pageSize:this.pageSize,
					searchForm:this.searchForm
		    }
		 
		  this.$api.post('/admin/getPrizeList',params).then(res=>{
			  let data = res.data
			  this.page_totle = data.count
			  this.list = data.result
		  })
	  }
      
    }
  }
</script>
